<!DOCTYPE html> <!-- this is HTML5 -->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>MediaSnak - {% block title %}{% endblock %}</title>
        <link rel="stylesheet" type="text/css" media="screen" href="/static/style.css">
        {% block css %}
        {% endblock %}

        {% block preload_js %}
        {% endblock %}

        {% block extra-head %}{% endblock %}
    </head>

    <body>
        <div id="wrapper">

            <div id="header">
                <div id="hfloat">
                
                    {% if username %}Welcome, {{ username }} - <a href="http://accounts.google.com">My Account</a>
                    {% else %}You are not logged in
                    {% endif %}
               
                </div>
                <img id="logo" src="http://s3.mediasnak.com/assets/icon.png" width="230" height="94" alt="logo"><br><br><h1>{% block header-title %}{% endblock %}</h1>
            </div>
            <div id="navbar">
                <div id="navbar-inner">
                    <a href="/"><div class="navlink">Home</div></a>
                    <a href="/files"><div class="navlink">Browse</div></a>
                    <a href="/upload"><div class="navlink">Upload</div></a>
                    <a href="/tags"><div class="navlink">Tags</div></a>
                    <a href="/search"><div class="navlink">Search</div></a>
                    {% if username %}<a href="{{ logout_url }}"><div class="navlink">Log Out</div></a>
                    {% else %}<a href="{{ login_url }}"><div class="navlink">Log In</div></a>
                    {% endif %}
                </div>
            </div>
            <div id="sidebar">
                {% block searchbar %}
                {% if username %}
                <form id="searchform" method="GET" action="files">
                    <input type="text" class="fade" name="searchterm" id="searchbox" value="Quick Search"
                    onfocus="if(this.value==this.defaultValue){this.value='';this.className=''};"
                    onblur="if(this.value==''){this.value=this.defaultValue;this.className='fade'}"
                    title="Type in your search terms and press Enter"> 
                    {#<input type="submit" name="submit" value="Go" id="submit">#}
                    <input type="hidden" name="searchby" value="default">
                </form>
                <hr>
                {% endif %}
                {% endblock %}
                {% block sidebar %}{% endblock %}
            </div>
            <div id="content">
                {% block content-header %}
                {% if error %}<div class="error"><h3>Oops! We seem to have encountered an error!</h3><p>{{ error }}</p></div>{% endif %}
                {% if info %}<div class="info">{{ info }}</div>{% endif %}
                {% if messages %}
                {% for message in messages %}
                <div class="info">{{ message }}</div>
                {% endfor %}
                {% endif %}
                {% endblock %}

                {% block content %}{% endblock %}

            </div> <!-- /content -->
            <div class="zero">&nbsp;<!-- this div required for positioning --></div>

            <div id="footer"><a href="/about">About</a> - <a href="mailto:oliver@mediasnak.com">Contact Us</a> - <a href="/about/tos">Terms of Service</a> - <a href="http://code.google.com/p/mediasnak">Source Code</a><br>Copyright &copy; 2011 TerrorBite Industries.</div>

        </div>
        {% block js %}
        {% endblock %}
    </body>
</html>
